﻿/* ------------------------------------------------------
    브라우저 화면의 기본구성을 유지하는 레이아웃
-------------------------------------------------------*/
html, body
{
    margin: 3px 3px 0px 3px;
    font-family: 굴림, Arial, san-serif;
    font-size: 0.85em;
}

#head {	z-index: 1;	overflow:hidden;	position:relative;}
#body {padding: 1px; background-color:White; margin-top:5px;}
#foot {height:25px;}

.clear{display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}
   
.left { width:250px; float:left; margin-left:0px; }
.main { margin-left:260px; position:relative; }
.right {padding: 0px; margin: 0px; width: 250px; float: right;}
.content {padding: 0px; margin: 0px;margin-right:260px; display:block;}

.mainOnly {position:relative; }


.tabCss {position: relative; overflow:hidden;}

/* --------------------------------
   콘트롤 기본특성 지정
--------------------------------- */
table { width:100%;}
input { font-size:1em;}
select { font-size: 1em;}
ul{ margin: 0;	padding: 0;}
li{list-style: none; }

.icon-text {}
.icon-text span { float:left;}
.icon-text a { float:left; margin-top:2px;}

/* ------------------------------------------------------
    Style Guide 용 레이아웃
-------------------------------------------------------*/
.stg_div { width:800px;}
.stg_div2{ border: 2px dotted #808080;    width: 800px;    min-height:60px;}
.stg_div3 { width:200px;}

.demo_line
{
    border: 1px solid #808000;
}

.icons {margin: 0; padding: 0;}
.icons li {margin: 2px; position: relative; padding: 4px 0 !important; cursor: pointer; float: left;  list-style: none;}
.icons span.ui-icon {float: left; margin: 0 4px;}


/* ------------------------------------------------------
    화면 상단 메뉴구성
-------------------------------------------------------*/

.ky-menu {border-style: none none solid none; border-width: 3px; position: relative; height: 23px; padding-top: 1px;}

.ky-menu ul{ margin: 0;	padding: 0;}
.ky-menu li{list-style: none; float: left;    padding: 0px 10px 0px 10px; height:16px; vertical-align:middle;}
.ky-menu .leftMenu{    padding: 5px 0 0 5px;    position:absolute;}
.ky-menu .rightMenu{    padding: 5px 5px 0px 0px;    float: right;    position:relative;}
.ky-menu .centerMenu{
    width: 200px;
    left: 50%;
    position:absolute;
    margin-left: -100px;
    height: 20px;
    background-image: url('/image/crmkorea.gif');
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    background-position: center center;

}

.ky-menu .centertwitter{
    width: 200px;
    left: 50%;
    position:absolute;
    margin-left: -100px;
    height: 20px;
    background-image: url('/image/crmtwitter.gif');
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    background-position: center center;
}

.ky-menu .leftOverMenu{    padding: 0px;    position:absolute;}
.ky-menu .rightOverMenu{    padding: 0px;    float: right;    position:relative;}


/* ---
.ky-call-menu {padding: 5px ; text-align: center; position:relative;}
.ky-call-menu22 .buttons {padding: 5px; position:relative; margin:5px 100px 5px 100px;}
.ky-call-menu22 .findHead {padding: 5px; position:relative; margin:5px 100px 5px 100px;}
#headFindText22 { font-size:1.2em;}
.ky-call-menu22 .buttons input{}
--- */

.bottomMenu {height: 30px;  font-size:0.85em;position: relative;}
.bottomMenu ul{ margin: 0;	padding: 0;}
.bottomMenu li{list-style: none; float: left;    padding: 0px 10px 0px 10px;}
.bottomMenu .leftMenu{    padding: 5px 0 0 5px;    position:absolute;}
.bottomMenu .rightMenu{    padding: 5px 5px 0px 0px;    float: right;    position:relative;}
.bottomMenu .centerMenu
{
    top: 3px;
    width: 400px;
    float: left;
    left: 50%;
    position: absolute;
    margin-left: -200px;
    font-size: small;
}

.icon {background-position: 0px center; background-repeat: no-repeat; width: 30px; display: inline-block; height: 11px; margin:0px 3px 0px 3px;}



.Noti {background-position: 0px center; background-repeat: no-repeat; width: 30px; display: inline-block; height: 11px; margin:0px 3px 0px 3px;}
.Noti_new{    background-image: url('/image/bt_op_b.gif');}
.Noti_icoimp03{    background-image: url('/image/icoimp03.gif');}
.Noti_icoquestion{    background-image: url('/image/icoquestion.gif');}
.Noti_ic_ppt{    background-image: url('/image/ic_ppt.gif');}

/* ----------------------------- 
   LeftTreeMenu
------------------------------- */
.LeftTreeMenu{}
.LeftTreeMenu li{}
.LeftTreeMenu li div{ padding:5px; overflow:auto;}
.LeftTreeMenu li li{ padding-left:5px;}


/* ---------------------------------------------------
  ListType 디자인
------------------------------------------------------ */
.ListType{    border: 1px solid #4297d7;    margin: 0px 0px 5px 0px;    padding: 0px 0px 0px 0px;}
.ListType h3   {font-size:  1em; margin: 0px 0px 0px 0px;    padding: 2px 2px 2px 2px; font-weight:normal;}
.ListType h3 a {font-size:0.8em; margin-right:2px; float:right;}
.ListType ul   {margin: 0;   padding: 2px 2px 2px 2px;}
.ListType li   {margin: 0;    padding: 1px 1px 1px 1px;    list-style: none;}

/* ---------------------------------------------------

------------------------------------------------------ */
.hideUl 
{
    display:none;
}

.contextMenu{	display:none;}
.DivContextMenu
{
    position: absolute; /*leave this alone*/
    display: block; /*leave this alone*/
    
    border: 2px solid #666666;
    overflow: auto;
    z-index: 3000;
    background-color: #FFFFFF;
    padding:10px 10px 10px 10px ;
}
.DivContextMenu ul{	list-style: none; padding:0px; margin:0px;}
.DivContextMenu li{	list-style: none; padding:0px; margin:0px; margin-bottom:5px;}
.DivContextMenu img{padding:0px; vertical-align:middle}

.DivContextMenu a:link {color: #000000;    text-decoration: none;}      
.DivContextMenu a:active{color:#000000;}                         
.DivContextMenu a:visited{color:#000000;text-decoration:none;}   
.DivContextMenu a:hover{color:#000000;text-decoration:underline;}


.DivTableMenu
{
    position: absolute; /*leave this alone*/
    display: block; /*leave this alone*/
    width:320px;    
    border: 2px solid #666666;
    overflow: auto;
    z-index: 3000;
    background-color: #FFFFFF;
    padding:10px 10px 10px 10px ;
    font-size:0.85em;
}
.DivTableMenu ul{	list-style: none; padding:0px; margin:0px; }
.DivTableMenu li{    list-style: none;    padding: 0px;    margin: 0px;    width: 24%;    height:18px;  margin-bottom:5px;  float: left;}
.DivTableMenu img{padding:0px; vertical-align:middle; display:none;}

.DivTableMenu a:link {color: #000000;    text-decoration: none;}      
.DivTableMenu a:active{color:#000000;}                         
.DivTableMenu a:visited{color:#000000;text-decoration:none;}   
.DivTableMenu a:hover{color:#000000;text-decoration:underline;}

.DivContextInput
{
    position: absolute; /*leave this alone*/
    display: block; /*leave this alone*/
    
    border: 2px solid #666666;
    overflow: auto;
    z-index: 3000;
    background-color: #FFFFFF;
    padding:10px 10px 10px 10px ;
}
.DivContextInput ul{	list-style: none; padding:0px; margin:0px;}
.DivContextInput li{	list-style: none; padding:0px; margin:0px; margin-bottom:5px;}
.DivContextInput img{padding:0px; vertical-align:middle}

.DivContextInput a:link {color: #000000;    text-decoration: none;}      
.DivContextInput a:active{color:#000000;}                         
.DivContextInput a:visited{color:#000000;text-decoration:none;}   
.DivContextInput a:hover{color:#000000;text-decoration:underline;}
    
/* ------------------------------------------------------

----------------------------------------------- */
.showBtnArea {margin: 0px; padding: 3px; overflow:auto;}
 
.showFilterArea {margin: 0px; padding: 3px;}
.showFilterArea ul{  list-style-type:none;   padding: 0px;    margin: 0px;    display: inline-block;}
.showFilterArea ul li { float:left;  padding: 0 0  2 0;  margin: 0 0 2 0; width:33%;  vertical-align:middle; white-space: nowrap;}
.showFilterArea li span {width: 30%; float:left; white-space: nowrap;}
.showFilterArea li input  {height:1em;}

/* ----------------------------------------------------
.stable table { border-collapse:collapse;width: 99%;}
---------------------------------------------------- */
.stable {position:relative; padding:0; }
.stable_w99{width:98%; position:relative;}
.stable table {width:99%;position:relative;}
.stable table td { padding-left:5px; padding-top:2px; position:relative;}
.stable .DataHead { border: 0px solid #77D5F7;    background-color:#0078AE;  width: 20%;    padding: 0px;    color: #FFFFFF;} 
.stable .DataBody { border: 0px solid #77D5F7;    background-color:White;    width: 30%;    padding: 0px;} 





/* -----------------------------------------------------
.superGrid_reSize
{
    z-index:1000;
}

------------------------------------------------- */

.superGrid
{
    overflow: hidden;
    position: relative;
    border: 1px solid #808080;
    float: left;
}
.superGrid table{table-layout:fixed;} 
.superGrid .head{ border-style: none solid solid none; border-width: 1px;  border-color: #808080;  overflow: hidden;  position: relative;    background-color: #CCCCCC;}
.superGrid .head table{table-layout:fixed; width:400px; font-size:1.1em; }
.superGrid .head td{ padding:5px; border-style: none solid none none;  border-width: 1px;    border-color: #808080; }
.superGrid .body{ border-style: none solid solid none; border-width: 1px;  border-color: #808080; width:100%; overflow: scroll!important;  position: relative; }
.superGrid .body table{table-layout:fixed; width:400px;}
.superGrid .body td{ padding:5px;  border-style: none solid solid none;  border-width: 1px;    border-color: #808080;}
.superGrid .foot{overflow:hidden;  position:relative; height:2em;}
.superGrid .foot table{table-layout:fixed; width:400px; }
.superGrid .foot td{ border-style: none solid none none; border-width: 1px;  margin-top: 3px; padding: 3px 5px 3px 5px; overflow: hidden; white-space: nowrap;}

.superGrid_select_tr {    background-color: #CCCC00;}
.superGrid_hover_tr{    background-color: #0000FF;    color: #FFFFFF;}
.superGrid_selectRow_tr{    background-color: #FF0000;    color: #FFFFFF;}



.gridTextBox {	border-style:none;	border-width: 0px;	width: 99%;}
.gridTextNum {    border-style: none;    border-width: 0px;    width: 99%;    text-align: right;}
.gridCombo {    border-style: none;    border-width: 0px;    width: 99%;    text-align: right;}

.show_td {    width: 35px; min-width: 35px;    text-align: center;}
.hidn_td {visibility:hidden;   display: none;}

.changeTD {    background-color: #FFCCCC;}
.pgNum{    border: 0px solid Transparent;    cursor: pointer; float:left;}
.pgNumNow{ cursor: pointer;    font-weight: bold;    color: #FF0000;}
.pgNumOver { border: 1px solid #0000FF;}

.tdCHK{    width: 40px}
.tdID{    width: 40px}
.tdCURD{    width: 40px}
.td_SortAsc{background-position: 5px center;  background-image: url('/image/ElementBlueArrowDown.gif'); background-repeat: no-repeat;}
.td_Sortdesc{ background-position: 5px center; background-image: url('/image/ElementBlueArrowUp.gif'); background-repeat: no-repeat;}
.inputTextBox_focus {font-size:small;	border-style: none; 	border-bottom: mediumblue 1px dotted;	background-color: Yellow;}


/* ----------------------------------------------------------
     SuperTable
------------------------------------------------- */

.SuperTable
{
    overflow:visible;
    position: relative;
    border: 1px solid #808080;
}

.SuperTable .head{ border-style: none solid solid none; border-width: 1px;  border-color: #808080;  overflow:hidden;  position: relative;    background-color: #CCCCCC; padding:0px;}
.SuperTable_head_L{width: 500px; float: left;  margin-left:0px;}
.SuperTable_head_R{ margin-left:505px;  position: relative; }

.SuperTable table{ width:100%;} 
.SuperTable thead{ border-style: none solid solid none; border-width: 1px;  border-color: #808080;  overflow: hidden;  position: relative;    background-color: #CCCCCC;}
.SuperTable thead td{ padding:5px; border-style: none solid none none;  border-width: 0px;    border-color: #808080; }
.SuperTable tbody{ border-style: none solid solid none; border-width: 1px;  border-color: #808080; overflow: scroll!important;  position: relative; }
.SuperTable tbody td{ padding:5px;  border-style: none none solid none;  border-width: 1px;    border-color: #808080;}

.SuperTable .foot{ border-style: none solid solid none; border-width: 1px;  border-color: #808080;  overflow: hidden;  position: relative;    background-color: #CCCCCC;  padding:0px;}

.loader { position:absolute; z-index:100; }

.gridTextBox {	border-style:none;	border-width: 0px;	width: 99%;}
.gridTextNum {    border-style: none;    border-width: 0px;    width: 99%;    text-align: right;}
.gridCombo {    border-style: none;    border-width: 0px;    width: 99%;    text-align: right;}

.SuperTable_show_td {width: 35px; min-width: 35px; }
.SuperTable_hidn_td {visibility:hidden;   display: none;}

.SuperTable_select_tr {    background-color: #CCCC00;}
.SuperTable_hover_tr{    background-color: #0000FF;    color: #FFFFFF;}
.SuperTable_selectRow_tr{    background-color: #FF0000;    color: #FFFFFF;}

.changeTD {    background-color: #FFCCCC;}
.PgnumArea { text-align:right; float:right;  }
.pgNum{    border: 1px solid Transparent;    cursor: pointer; float:left;}
.pgNumNow{ border: 1px solid Transparent; cursor: pointer;    font-weight: bold;    color: #FF0000;}
.pgNumOver { border: 1px solid #0000FF;}

.tdCHK{    width: 40px}
.tdID{    width: 40px}
.tdCURD{    width: 40px}
.SuperTable_SortAsc{background-position: right center;  background-image: url('/image/ElementBlueArrowDown.gif'); background-repeat: no-repeat; padding-right:10px;}
.SuperTable_Sortdesc{ background-position: right center; background-image: url('/image/ElementBlueArrowUp.gif'); background-repeat: no-repeat;padding-right:10px;}
.inputTextBox_focus {font-size:small;	border-style: none; 	border-bottom: mediumblue 1px dotted;	background-color: Yellow;}




/* ------------------------------------------------------

-------------------------------------------------------- */

.column
{
    border: 0px dotted #C0C0C0;
    float: left;
    width: 99.4%;
    min-height:10px;
}
.portlet
{
    margin: 0.2em 0.2em 1em 0.2em;
}
.portlet-header
{
    margin: 0.1em;
    padding-bottom: 4px;
    padding-left: 0.2em;
    padding-top: 0.2em;
    font-weight: normal;
    cursor: move;
}
.portlet-header .ui-icon
{
    float: right;
}
.portlet-content
{
    padding: 0.4em;
 
}
.portlet-content ul
{
   margin: 0;
   padding: 2px 2px 2px 2px;
}
.portlet-content li
{
    margin: 1px 1px 1px 1px;
    padding: 1px 1px 1px 1px;
    list-style: none;
}
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }

/* ---------------------------

---------------------------- */

.ReportBody
{
    border: 0px solid #FF0000;
    width:100%;
    height: 400px;
    position:relative;
    background-color: White;
}




/* -----------------------------------------------------

------------------------------------------------------- */
.progress
{
    overflow: hidden;
    height: 25px;
    margin: 5px 20px 5px 20px;
    background: url('/image/bg_progress.gif');
    border-right: 1px solid #e3e3e3;
    line-height: 15px;

} 
.progress .tit
{
    float: left;
    position: relative;
    z-index: 1000;
    height: 20px;
    margin: 0;
    padding: 5px 20px 0px 20px;
    font-size: 11px;
    color: #fff;
    font-size: 1em;
    line-height: 15px;
    text-align: center;
    background-color: #999999;
}
.progress ul{float:left;margin:0;padding:0}
.progress li,.progress li a{background:url('/image/bg_progress_item.gif') no-repeat;white-space:nowrap;list-style: none;}
.progress li{float:left;margin:0 0 0 -13px;padding:0 0 0 13px;background-position:-287px 0}
.progress li a{font-size: 1em; display:inline-block;height:20px;padding:5px 28px 0 13px;background-position:100% top}
.progress li.on{position:relative;z-index:10;background-position:0 100%;color:#fff}
.progress li.on a{background:url('/image/bg_progress_item.gif') no-repeat 100% 100%}
.progress li.last,.progress li.last a{background:none}
.progress .right{position:absolute;top:6px;right:10px;color:#444}
.progress li a:link {color: #000000;    text-decoration: none;}      
.progress li a:active{color:#000000;}                         
.progress li a:visited{color:#000000;text-decoration:none;}   
.progress li a:hover{color:#000000;text-decoration:underline;}
/* //UI Object */

/*position and hide the menu initially - leave room for the menu to expand...*/
#description {margin-left:150px; width:510px;}
#page {padding:20px 0; width:100%;}
#menu {position:absolute; top:0; left:0; display:none;}
/*dock styling...*/
/*...set the cursor...*/
#menu div.jqDock {cursor:pointer;}


/* --------------------------------------------------------------
   콜 센터
---------------------------------------------------------------- */
#area1 { margin-right:2px;   width: 15%;     border: 0px solid #C0C0C0; overflow:auto;   float:left;}
#area2 { margin-right:2px;   width: 34%;     border: 0px solid #C0C0C0; overflow:auto;    float:left;}
#area3 { margin-right:2px;   width: 34%;     border: 0px solid #C0C0C0; overflow:auto;   float:left;}
#area4 { margin-right:2px;   border: 0px solid #C0C0C0; overflow:auto;   }

#CallKMSList{list-style: none;margin:0;padding:0 }
#CallKMSView
{
    margin-top:5px;
    border: 1px solid #808080;
    height: 300px;
    overflow: auto;
} 
#KMSboard
{
    border: 0px solid #FF0000;
}
.line
{
    border-style: solid none none none;
    border-width: 1px;
    border-color: #C0C0C0;
    margin:0 3 0 3;
}
#TxtUserFind{ font-size:0.8em;}

/* -------------------------------------------------

-------------------------------------------------*/
#SuperCTI {}
#ServerOBJ{ height:0px;}
#CallMonitorBoard{border: 0px solid #FF0000;    padding: 0px;   margin-top: 3px;}
#CTILogTxt{height: 100px;width: 98%; margin-right: 10px; margin-bottom: 10px; font-size: 0.9em; color: #FFFFFF; background-color: #000080;}
.CTIActiveRed{background-position: 1px center;  background-image: url('/image/img_SignalRed.gif'); background-repeat: no-repeat; padding-left: 40px;}
.CTIActiveGreen {background-position: 1px center;  background-image: url('/image/img_SignalGreen.gif'); background-repeat: no-repeat; padding-left: 40px;}
#CTIButtons{border:0px ridge #FF0000; overflow:auto; list-style-type:none;}

.CTI_BTN { height:20px; width:70px;  float:left;}
.CTI_BTN_Login{background-position: 1px center;  background-image: url('/image/cti/btn_login.gif'); background-repeat: no-repeat; }
.CTI_BTN_Logout{background-position: 1px center;  background-image: url('/image/cti/btn_logout.gif'); background-repeat: no-repeat; }
.CTI_BTN_Answer_OFF{background-position: 1px center;  background-image: url('/image/cti/btn_telon_no.gif'); background-repeat: no-repeat;}
.CTI_BTN_Answer{background-position: 1px center;  background-image: url('/image/cti/btn_telon.gif'); background-repeat: no-repeat;}
.CTI_BTN_Hangup_OFF{background-position: 1px center;  background-image: url('/image/cti/btn_teloff_no.gif'); background-repeat: no-repeat;}
.CTI_BTN_Hangup{background-position: 1px center;  background-image: url('/image/cti/btn_teloff.gif'); background-repeat: no-repeat;}

.CTI_BTN_Hold_OFF{background-position: 1px center;  background-image: url('/image/cti/btn_telhold_no.gif'); background-repeat: no-repeat;}
.CTI_BTN_Hold{background-position: 1px center;  background-image: url('/image/cti/btn_telhold.gif'); background-repeat: no-repeat;}
.CTI_BTN_Holdcan{background-position: 1px center;  background-image: url('/image/cti/btn_telholdcan.gif'); background-repeat: no-repeat;}

.CallCount{ border: 0px solid #FF0000;    padding: 5px;    margin: 0px;    text-align: center; overflow:auto; }
.CallCount table { width:100%; position:relative; text-align: center;}
.CallCount table td{   border-style: none solid none none;    border-width: 1px; margin: 1px;    border-color:transparent;}
.CallCount input{    border-style: none;    text-align: center;    padding:0px;    margin: 0px;    width: 100%;}

.CallCount ul{list-style-type:none;    margin: 0px;}
.CallCount li{list-style-type:none; padding: 0px;    margin: 0px; float:left; width:9%; }
.CallCount li input{    border-style: none;    text-align: center;    padding:0px;    margin: 0px; width:90%;}


.CallCmdStatus {   display:inline-block;  }
.CallCmdStatus li{ list-style-type:none; padding-left:1px; padding-right:5px;  margin: 0px;  float:left; height:1.2em; }
#CTI_BTN_TellerStatus{ width:70px;} 

.CallCmdBtn {   display:inline-block;  }
.CallCmdBtn li{    list-style-type:none;  padding-left:1px;    margin: 0px;  float:left; }

.CallLinkUser {   display:inline-block;  }
.CallLinkUser li{
    list-style-type:none;  padding-left:5px;    margin: 0px;  float:left; 
}

.CallJobStatus {   display:inline-block;  }
.CallJobStatus li{    list-style-type:none; padding-left:2px; padding-right:2px;  margin: 0px;  float:left; }

#CTIDIV{ height: 0px;}

#set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

.dashboard-area
{
    position: relative;
    border-style: none;
    border-color: #FF0000;
    width: 600px;
    background-color: YellowGreen;
    padding: 0px;
    float: left;
}
.dashboard-main
{
    background-position: left top;
    border: 0px solid #CCCCB3;
    width: 100%;
    height: 200px;
    background-color: White;
    position: relative;
    overflow: hidden;
    background-image: url('/image/MP900433137.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
}
.dashboard-bottom
{
	clear:left; 
	border-color: #FFFF00;
	width: 600px;
	height: 50px;
	left:0; bottom:0px;
	background-color:Transparent;
}

.dashboard-ui
{
    position: absolute;
    width: 100px;
    background-color: #EAEA00;
    overflow: hidden;
    padding: 0.5em;
    border: 1px solid Transparent;
    cursor: hand;
    vertical-align: top;
}

.dashboard-ui-mouseover
{
    border: 0px solid #FF0000;
    background-color: #E284F0;
}

.InBlock {overflow:hidden; display:block;  }

/* --------------------------------------------

---------------------------------------------*/
.txtCallKMS {width: 20%; color: #C0C0C0;}
.txtCallKMS2{width: 20%; color: #000000;}
